<template>


    <a-modal :title="false" :width="1200" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel">

        <a-tabs default-active-key="1" size="large">
            <a-tab-pane key="1" tab="订单信息">
                <div class="tabBox">
                    <a-descriptions bordered :column="3">
                        <a-descriptions-item label="订单编号">{{main.id}}</a-descriptions-item>
                        <a-descriptions-item label="订单来源">{{main.source}}</a-descriptions-item>
                        <a-descriptions-item label="车牌号"><b class="text-pink">{{main.plateNo}}</b></a-descriptions-item>
                        <a-descriptions-item label="车辆类型">{{main.typeName}}</a-descriptions-item>
                        <a-descriptions-item label="车主信息">{{main.vipId?'有':'无' }}</a-descriptions-item>
                        <a-descriptions-item label="所属区域">{{main.areaName}}</a-descriptions-item>
                        <a-descriptions-item label="所属街道">{{main.streetName}}</a-descriptions-item>
                        <a-descriptions-item label="场地名称"><span class="text-pink">{{main.placeName}}</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="停放车位"><span class="text-pink">{{main.seatCode}}</span>
                        </a-descriptions-item>
                    </a-descriptions>

                    <a-divider orientation="left"><span class="text-aux font-size-14">时间节点      </span></a-divider>

                    <a-descriptions bordered :column="3">
                        <a-descriptions-item label="进场时间">{{main.entryTime}}</a-descriptions-item>
                        <a-descriptions-item label="离场时间">{{main.exitTime}}</a-descriptions-item>
                        <a-descriptions-item label="停放时长">{{main.stayDuration}}</a-descriptions-item>
                        <a-descriptions-item label="停留状态"><span :class=" 'text-'+main.stayStatus ">{{$exMod.findDict(StayStatusOPT,main.stayStatus)}}</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="首次支付时间">{{main.payFirstTime}}</a-descriptions-item>
                        <a-descriptions-item label="离场超时时长">{{main.timeoutDuration}}</a-descriptions-item>

                    </a-descriptions>


                    <a-divider orientation="left"><span class="text-aux font-size-14">费用结构      </span></a-divider>


                    <a-descriptions bordered :column="3">

                        <a-descriptions-item label="计费模式">{{main.exitAttr}}</a-descriptions-item>
                        <a-descriptions-item label="计费属性">
                            <span :class=" 'text-'+main.needPayAttr ">{{$exMod.findDict(NeedPayAttrOPT,main.needPayAttr)}}</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="订单金额">{{main.payableFee/100}}</a-descriptions-item>
                        <a-descriptions-item label="提前支付减免金额">{{main.exitReductionFee/100}}</a-descriptions-item>
                        <a-descriptions-item label="改价减免金额">{{main.reduceFee/100}}</a-descriptions-item>
                        <a-descriptions-item label="卡券抵扣金额">{{main.couponFee/100}}</a-descriptions-item>
                        <a-descriptions-item label="已支付金额">{{main.actuallyFee/100}}</a-descriptions-item>
                        <a-descriptions-item label="未支付金额" span="2">{{main.arrearsFee/100}}</a-descriptions-item>

                        <a-descriptions-item label="费用结算描述" :span="3">{{main.payableDescription}}</a-descriptions-item>
                    </a-descriptions>


                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="订单图片">
                <div class="tabBox maxHeight">

                    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 4, xxl: 4 }" :data-source="photoList">
                        <a-list-item slot="renderItem" slot-scope="item, index">
                            <a-card>
                                <a slot="cover" class="cover" :href="item.url" target="_blank">
                                    <img width="100%" :src="item.url"/>
                                </a>


                                <a-card-meta :title="$exMod.findDict(OrderEventOPT,item.event)">
                                    <template slot="description">
                                        <div class="description">
                                            <li> 车位:{{item.seatCode}}</li>
                                            <li> 时间: {{item.createTime}}</li>
                                            <li> 来源: {{item.source}}</li>
                                            <li> 备注: {{item.remark}}</li>
                                        </div>
                                    </template>
                                </a-card-meta>

                            </a-card>
                        </a-list-item>
                    </a-list>


                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="订单日志">
                <div class="tabBox maxHeight">

                    <a-timeline v-if="logList.length>0">
                        <a-timeline-item v-for="(item,index) in logList" :key="index">
                            <p class="margin-b-1rem font-size-14"> {{item.remark}}</p>
                            <p class="font-size-12 text-aux">{{item.createTime}}</p>
                        </a-timeline-item>
                    </a-timeline>

                    <a-empty v-else description="当前订单没有日志记录"/>


                </div>
            </a-tab-pane>

            <!--
            <a-tab-pane key="4" tab="支付信息">
                <div class="tabBox maxHeight">

                </div>
            </a-tab-pane>
                 -->

            <a-tab-pane key="5" tab="关联工单">
                <div class="tabBox maxHeight">


                    <a-timeline v-if="taskList.length>0">
                        <a-timeline-item v-for="(item,index) in taskList" :key="index">
                            <p class="margin-b-1rem font-size-14 text-blue "><b> {{item.id}}</b></p>
                            <p class="margin-b-1rem font-size-12 "> {{item.digest}}</p>
                            <p class="margin-b-1rem font-size-12"><span class="margin-r-1rem"> 任务类型:{{  $exMod.findDict(TaskTypeOPT,item.type)   }}</span>
                                <span class="margin-r-1rem">任务状态:{{ $exMod.findDict(TaskStatusOPT, item.status)}}</span>
                                <span class="margin-r-1rem">创建时间:{{item.createTime}} </span> <span
                                        v-if="item.finishTime">  完成时间:{{item.finishTime}}  </span></p>

                        </a-timeline-item>

                    </a-timeline>

                    <a-empty v-else description="当前订单没有日志记录"/>


                </div>
            </a-tab-pane>

            <a-tab-pane key="6" tab="费用推算" v-if="computeFee">
                <div class="tabBox maxHeight">

                    <a-list :bordered="true" :data-source="computeFee.logs" :loading="loading">
                        <div slot="header" class="text-pink"> 停车时长:{{computeFee.duration}} ,
                            费用:{{computeFee.fee/100}}元
                        </div>
                        <a-list-item slot="renderItem" slot-scope="item, index">
                            {{ item }}
                        </a-list-item>

                    </a-list>
                </div>
            </a-tab-pane>

        </a-tabs>


        <template slot="footer">
            <p class="text-left font-size-12 text-aux">说明:在订单信息中 所有参数值为字符【ROBOT】的数据项,均是由智能硬件终端触发的相关事件</p>
        </template>
    </a-modal>

</template>
<script>
    import {OrderMainFind} from '../public/http.js';
    import {dictLoad} from "../../../util/internal.api";

    export default {
        props: ['detailRecord'],
        data() {
            return {
                loading: false, //按钮Loading
                title: "订单详情",
                visible: true, //modal 显示状态

                main: {},
                photoList: [], //照片日志
                logList: [],  //事件日志
                taskList: [], //订单任务

                NeedPayAttrOPT: [], //订单计费属性
                StayStatusOPT: [], //车辆停放状态数据字典
                OrderEventOPT: [],
                computeFee: {}, //费用推算数据
                TaskTypeOPT: [],
                TaskStatusOPT: [],

            };
        },
        methods: {

            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },

            async init() {
                dictLoad("NeedPayAttr").then(res => this.NeedPayAttrOPT = res);
                dictLoad("StayStatus").then(res => this.StayStatusOPT = res);
                dictLoad("OrderEvent").then(res => this.OrderEventOPT = res);
                dictLoad("ParkingTaskType").then(res => this.TaskTypeOPT = res);
                dictLoad("ParkingTaskStatus").then(res => this.TaskStatusOPT = res);


                await OrderMainFind(this.detailRecord.id).then(res => {
                    if (res.code === 0) {
                        this.main = res.data.result.main;
                        this.photoList = res.data.result.photoList;
                        this.logList = res.data.result.logList;
                        this.computeFee = res.data.result.computeFee;
                        this.taskList = res.data.result.taskList;

                    }

                })
            },


        },

        created() {
            this.init();
        }
    };
</script>


<style lang="scss" scoped>

    .tabBox {
        min-height: 450px;
        padding: 10px;

    }

    .maxHeight {
        max-height: 650px;
        overflow-y: scroll;
    }

    .cover {

        height: 150px;
        overflow: hidden;
        background-color: #F8F8F8;
    }

    .description {
        li {
            font-size: 13px;
            height: 20px;
            line-height: 20px;
        }

    }
</style>